<template>
    <div class="index-box">
       
                <div class="grid-content ">
                    <el-form :model="queryParams" ref="queryForm" :inline="true" class=" search-form-new"
                        label-width="68px" @keyup.enter.native="search">
                        <el-form-item label="部门筛选" prop="deptIdList">
                            <el-select @change="search" collapse-tags v-model="queryParams.deptIdList" placeholder="请选择"
                                multiple clearable>
                                <el-option v-for="dict in allDepts" :key="dict.deptId" :label="dict.deptName"
                                    :value="dict.deptId" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="游戏类型" prop="gameId">
                            <el-select @change="search" filterable v-model="queryParams.gameId" placeholder="请选择游戏"
                                clearable>
                                <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name"
                                    :value="dict.id" />
                            </el-select>
                        </el-form-item>
                       
                            <el-button icon="el-icon-refresh" type="warning" @click="chongzhi" class="zdy-btn zdy-btn-refresh">刷新</el-button>
                        
                    </el-form>

                    <div class="flex" style="margin-top: 9px;">
                        <subtit title="库存概览"></subtit>
                    </div>
                    <div class="statis-box">
                        <div class="statis-list">
                            <div class="statis-item statis-item1">
                                <div class="label">全部</div>
                                <div class="label-value">
                                    <div class="num">{{ zhuangtai.total }}</div>
                                    <div class="last"> 成本: <span class="value">{{ zhuangtai.totalCostPrice }}</span>
                                    </div>
                                    <div class="last"> 售价:<span class="value">{{ zhuangtai.totalPrice }}</span></div>

                                </div>
                            </div>
                            <div class="statis-item statis-item2">
                                <div class="label">在售商品</div>
                                <div class="label-value">
                                    <div class="num">{{ zhuangtai.weishou }}</div>
                                    <div class="last"> 成本: <span class="value">{{ zhuangtai.weishouCostPrice }}</span>
                                    </div>
                                    <div class="last"> 售价:<span class="value">{{ zhuangtai.weishouPrice }}</span></div>
                                </div>
                            </div>
                            <div class="statis-item statis-item3">
                                <div class="label">已售商品</div>
                                <div class="label-value">
                                    <div class="num">{{ zhuangtai.yishou }}</div>
                                    <div class="last"> 成本: <span class="value">{{ zhuangtai.yishouCostPrice }}</span>
                                    </div>
                                    <div class="last"> 售价:<span class="value">{{ zhuangtai.yishouPrice }}</span></div>
                                </div>
                            </div>

                            <div class="statis-item statis-item4">
                                <div class="label">交易中</div>
                                <div class="label-value">
                                    <div class="num">{{ zhuangtai.jiaoyizhong }}</div>
                                    <div class="last"> 成本: <span class="value">{{ zhuangtai.jiaoyizhongCostPrice
                                            }}</span>
                                    </div>
                                    <div class="last"> 售价:<span class="value">{{ zhuangtai.jiaoyizhongPrice }}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="statis-item statis-item5">
                                <div class="label">下架商品</div>
                                <div class="label-value">
                                    <div class="num">{{ zhuangtai.xiajia }}</div>
                                    <div class="last"> 成本: <span class="value">{{ zhuangtai.xiajiaCostPrice }}</span>
                                    </div>
                                    <div class="last"> 售价:<span class="value">{{ zhuangtai.xiajiaPrice }}</span></div>
                                </div>
                            </div>

                            <div class="statis-item statis-item6">
                                <div class="label">待审核商品</div>
                                <div class="label-value">
                                    <div class="num">{{ zhuangtai.daishenhe }}</div>
                                    <div class="last"> 成本: <span class="value">{{ zhuangtai.daishenheCostPrice }}</span>
                                    </div>
                                    <div class="last"> 售价:<span class="value">{{ zhuangtai.daishenhePrice }}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="statis-item statis-item7">
                                <div class="label">问题商品</div>
                                <div class="label-value">
                                    <div class="num">{{ zhuangtai.wenti }}</div>
                                    <div class="last"> 成本: <span class="value">{{ zhuangtai.wentiCostPrice }}</span>
                                    </div>
                                    <div class="last"> 售价:<span class="value">{{ zhuangtai.wentiPrice }}</span></div>
                                </div>
                            </div>

                            <div class="statis-item statis-item8">
                                <div class="label">损耗商品</div>
                                <div class="label-value">
                                    <div class="num">{{ zhuangtai.zhaohui }}</div>
                                    <div class="last"> 成本: <span class="value">{{ zhuangtai.zhaohuiCostPrice }}</span>
                                    </div>
                                    <div class="last"> 售价:<span class="value">{{ zhuangtai.zhaohuiPrice }}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex">
                        <subtit title="库存明细"></subtit>

                    </div>

                    <!-- Tabs切换 -->
                    <div class="customTab">
                        <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabChange"
                            v-loading="loading">
                            <el-tab-pane v-for="tab in tabList" :key="tab.value" :label="tab.name" :name="tab.value">
                                <!-- 在售商品Tab -->
                                <template v-if="tab.value === 'zaishou'">
                                    <!-- 统计卡片 -->
                                    <div class="flex tabs-box">
                                        <div v-for="(stat, index) in currentTabData.statistics" :key="index"
                                            class="flex" @click="goUrl(stat)"
                                            :style="index === 0 ? { 'cursor': 'pointer' } : {}">
                                            <div class="tabs-img">
                                                <img :src="stat.icon" :alt="stat.label">
                                            </div>
                                            <div class="tabs-text">
                                                <div>{{ stat.label }}</div>
                                                <div class="tabs-num">{{ stat.value }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 分组选择 -->
                                    <div class="radio-box">
                                        <el-radio-group v-model="queryParams.groupKey" @change="handleGroupChange">
                                            <el-radio-button label="youxi">游戏</el-radio-button>
                                            <el-radio-button label="renyuan">人员</el-radio-button>
                                            <el-radio-button label="bumen">部门</el-radio-button>
                                        </el-radio-group>
                                    </div>

                                    <!-- 数据表格 -->
                                    <div class="app-container table_box table_box_new" v-loading="loading">
                                        <el-table class="table-ceiling" stripe border :data="currentTabData.list" v-sticky-header="{ offsetTop: 0 }">
                                            <el-table-column align="center"
                                                :label="statusMap[queryParams.groupKey].name">
                                                <template slot-scope="scope">
                                                    <span v-if="queryParams.groupKey === 'youxi'">{{ scope.row.gameName
                                                    }}</span>
                                                    <span v-if="queryParams.groupKey === 'renyuan'">{{
                                                        scope.row.createName }}</span>
                                                    <span v-if="queryParams.groupKey === 'bumen'">{{ scope.row.deptName
                                                    }}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="商品数量" prop="total_goods" />
                                            <el-table-column align="center" label="回收成本" prop="total_cost" />
                                            <el-table-column align="center" label="销售价格" prop="total_sales" />
                                            <el-table-column align="center" label="预估利润" prop="total_profit" />
                                            <el-table-column align="center" label="平均利润" prop="avg_profit" />
                                            <el-table-column align="center" label="毛利率%" prop="mao" />
                                            <el-table-column align="center" label="售价500以下" prop="lv1" />
                                            <el-table-column align="center" label="售价500-1500" prop="lv2" />
                                            <el-table-column align="center" label="售价1500以上" prop="lv3" />
                                        </el-table>
                                    </div>
                                </template>

                                <!-- 滞销商品Tab -->
                                <template v-if="tab.value === 'zhixiao'">
                                    <div class="flex fabu2"
                                        style="margin-bottom: 16px; justify-content: space-between;align-items: center;">
                                        <div class="flex">
                                            <div class="tips">注:在现有时间没有卖出去的商品</div>
                                        </div>

                                        <div class="radio-box">
                                            <el-radio-group v-model="queryParams.groupKey" @change="handleGroupChange">
                                                <el-radio-button label="youxi">游戏</el-radio-button>
                                                <el-radio-button label="renyuan">人员</el-radio-button>
                                                <el-radio-button label="bumen">部门</el-radio-button>
                                            </el-radio-group>
                                        </div>
                                    </div>

                                    <div class="app-container table_box table_box_new" v-loading="loading">
                                        <el-table stripe align="center" border v-sticky-header="{ offsetTop: 0 }" :data="currentTabData.list"
                                             :header-cell-class-name="headerRowStyle"
                                            :cell-class-name="cellClassName">
                                            <el-table-column align="center"
                                                :label="statusMap[queryParams.groupKey].name">
                                                <template slot-scope="scope">
                                                    <span v-if="queryParams.groupKey === 'youxi'">{{ scope.row.gameName
                                                    }}</span>
                                                    <span v-if="queryParams.groupKey === 'renyuan'">{{
                                                        scope.row.createName }}</span>
                                                    <span v-if="queryParams.groupKey === 'bumen'">{{ scope.row.deptName
                                                    }}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="90天以上" prop="over_90d_count">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.over_90d_count }} 成本:{{ scope.row.over_90d_cost }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="60-90天" prop="num1">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.between_60_90d_count }}
                                                    成本:{{ scope.row.between_60_90d_cost }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="30-60天" prop="num2">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.between_30_60d_count }}
                                                    成本:{{ scope.row.between_30_60d_cost }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="15-30天" prop="between_15_30d_cost">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.between_15_30d_count }}
                                                    成本:{{ scope.row.between_15_30d_cost }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="15天以内" prop="num4">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_15d_count }} 成本:{{ scope.row.within_15d_cost
                                                    }}
                                                </template>
                                            </el-table-column>
                                            <!-- <el-table-column align="center" label="成本/数量" prop="num5" /> -->
                                        </el-table>
                                    </div>
                                </template>

                                <!-- 问题商品Tab -->
                                <template v-if="tab.value === 'fabu3'">
                                    <div class="tips fabu3-tips">注:有问题的商品,如冻结无法换绑等等</div>
                                    <div class="flex fabu2 fabu3">
                                        <div class="flex">
                                            <div class="total-info">
                                                <img class="imgs" :src="statisticsIcons[0]" alt="">
                                                <span class="total-label">总数量:</span>
                                                <span class="total-count">{{ currentTabData.totalCount || 0 }}</span>
                                                <img class="imgs img2" :src="statisticsIcons[1]" alt="">
                                                <span class="total-label">总金额:</span>
                                                <span class="total-amount">{{ currentTabData.totalAmount || 0 }}</span>
                                            </div>


                                        </div>
                                        <div class="radio-box">
                                            <el-radio-group v-model="queryParams.groupKey" @change="handleGroupChange">
                                                <el-radio-button label="youxi">游戏</el-radio-button>
                                                <el-radio-button label="renyuan">人员</el-radio-button>
                                                <el-radio-button label="bumen">部门</el-radio-button>
                                            </el-radio-group>
                                        </div>
                                    </div>

                                    <div class="app-container table_box table_box_new" v-loading="loading">
                                        <el-table stripe align="center" border v-sticky-header="{ offsetTop: 0 }" :data="currentTabData.list"
                                            >
                                            <el-table-column align="center"
                                                :label="statusMap[queryParams.groupKey].name" prop="gameName">
                                                <template slot-scope="scope">
                                                    <span v-if="queryParams.groupKey === 'youxi'">{{ scope.row.gameName
                                                    }}</span>
                                                    <span v-if="queryParams.groupKey === 'renyuan'">{{
                                                        scope.row.createName }}</span>
                                                    <span v-if="queryParams.groupKey === 'bumen'">{{ scope.row.deptName
                                                    }}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="3天以上未处理" prop="unprocessed3">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_3d_count }} 成本:{{ scope.row.within_3d_cost }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="7天以上未处理" prop="unprocessed7">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_7d_count }} 成本:{{ scope.row.within_7d_cost }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="15天以上未处理" prop="unprocessed15">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_15d_count }} 成本:{{ scope.row.within_15d_cost
                                                    }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="20天以上未处理" prop="unprocessed20">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_20d_count }} 成本:{{ scope.row.within_20d_cost
                                                    }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="30天以上未处理" prop="unprocessed30">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_30d_count }} 成本:{{ scope.row.within_30d_cost
                                                    }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="总未处理" prop="unprocessed30">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.total_goods }} 成本:{{ scope.row.total_cost }}
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </template>

                                <!-- 损耗商品Tab -->
                                <template v-if="tab.value === 'fabu4'">
                                    <div class="tips fabu3-tips">注:导致直接损失的商品,比如:找回</div>

                                    <div class="flex fabu2 fabu3">
                                        <div class="flex">

                                            <div class="total-info">
                                                <img class="imgs" :src="statisticsIcons[0]" alt="">
                                                <span class="total-label">总数量:</span>
                                                <span class="total-count">{{ currentTabData.totalCount || 0 }}</span>
                                                <img class="imgs img2" :src="statisticsIcons[1]" alt="">
                                                <span class="total-label">总金额:</span>
                                                <span class="total-amount">{{ currentTabData.totalAmount || 0 }}</span>
                                            </div>
                                        </div>
                                        <div class="radio-box">
                                            <el-radio-group v-model="queryParams.groupKey" @change="handleGroupChange">
                                                <el-radio-button label="youxi">游戏</el-radio-button>
                                                <el-radio-button label="renyuan">人员</el-radio-button>
                                                <el-radio-button label="bumen">部门</el-radio-button>
                                            </el-radio-group>
                                        </div>
                                    </div>

                                    <div class="app-container table_box table_box_new" v-loading="loading">
                                        <el-table stripe align="center" border v-sticky-header="{ offsetTop: 0 }" :data="currentTabData.list"
                                            >
                                            <el-table-column align="center"
                                                :label="statusMap[queryParams.groupKey].name" prop="gameName">
                                                <template slot-scope="scope">
                                                    <span v-if="queryParams.groupKey === 'youxi'">{{ scope.row.gameName
                                                    }}</span>
                                                    <span v-if="queryParams.groupKey === 'renyuan'">{{
                                                        scope.row.createName }}</span>
                                                    <span v-if="queryParams.groupKey === 'bumen'">{{ scope.row.deptName
                                                    }}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="30天以内损耗" prop="loss30">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_30d_count }} 成本:{{ scope.row.within_30d_cost
                                                    }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="60天以内损耗" prop="loss60">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_60d_count }} 成本:{{ scope.row.within_60d_cost
                                                    }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="90天以内损耗" prop="loss90">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_90d_count }} 成本:{{ scope.row.within_90d_cost
                                                    }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="180天以内损耗" prop="loss180">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_180d_count }} 成本:{{
                                                        scope.row.within_180d_cost
                                                    }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="1年以内损耗" prop="loss365">

                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.within_365d_count }} 成本:{{
                                                        scope.row.within_365d_cost
                                                    }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column align="center" label="总损耗" prop="totalLoss">
                                                <template slot-scope="scope">
                                                    数量:{{ scope.row.total_goods }} 成本:{{ scope.row.total_cost }}
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </template>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
        
    </div>
</template>

<script>
import subtit from "@/components/indexComponents/subtit.vue";
import { listDept } from "@/api/system/dept";
import { zaishou, zhixiao, wenti, sunhao, zhuangtai } from "@/api/dmgt/index";

export default {
    name: 'Inventory',
    components: {
        subtit,
    },
    computed: {
        allGameList() {
            return this.$store.getters.allGameList;
        },
        // 当前tab的数据
        currentTabData() {
            return this.tabData[this.activeTab] || { list: [], statistics: [] };
        },
        // 当前tab配置
        currentTabConfig() {
            return this.tabList.find(tab => tab.value === this.activeTab);
        }
    },
    data() {
        return {
            zhuangtai: {},
            // 状态映射
            statusMap: {
                'renyuan': { name: "人员" },
                'youxi': { name: "游戏" },
                'bumen': { name: "部门" },
            },

            // 加载状态
            loading: false,

            // 查询参数
            queryParams: {
                pageNum: 1,
                deptIdList: [],
                gameId: '',
                groupKey: 'youxi',
            },

            // 当前激活的tab
            activeTab: 'zaishou',

            // tab配置
            tabList: [
                { name: '在售商品', value: 'zaishou', api: zaishou, hasStatistics: true },
                { name: '滞销商品', value: 'zhixiao', api: zhixiao, hasStatistics: false },
                { name: '问题商品', value: 'fabu3', api: wenti, hasStatistics: false },
                { name: '损耗商品', value: 'fabu4', api: sunhao, hasStatistics: false },
            ],

            // 所有tab的数据存储
            tabData: {
                zaishou: { list: [], statistics: [], lastUpdate: null },
                zhixiao: { list: [], statistics: [], lastUpdate: null },
                fabu3: { list: [], statistics: [], lastUpdate: null },
                fabu4: { list: [], statistics: [], lastUpdate: null },
            },

            // 部门列表
            allDepts: [],

            // 统计图标
            statisticsIcons: [
                require('@/assets/img/home/shuju-1.png'),
                require('@/assets/img/home/shuju-2.png'),
                require('@/assets/img/home/shuju-3.png'),
                require('@/assets/img/home/shuju-4.png'),
                require('@/assets/img/home/shuju-5.png'),
                require('@/assets/img/home/shuju-6.png'),
            ],

            // 缓存时间（毫秒）
            cacheTimeout: 5 * 60 * 1000, // 5分钟
        }
    },
    methods: {
        // 初始化
        async init() {
            try {
                await Promise.all([
                    this.getDeptList(),
                    this.getStatus(),
                    this.loadTabData()
                ]);
            } catch (error) {
                console.error('初始化失败:', error);
                this.$message.error('页面初始化失败');
            }
        },
        async getStatus() {
            const data = await zhuangtai(this.queryParams);
            if (data.data.length > 0) {
                this.zhuangtai = data.data[0];
            }
        },

        // 加载当前tab数据
        async loadTabData(forceRefresh = false, skipStatistics = false) {
            if (this.loading) return;
            // 检查缓存
            if (!forceRefresh && this.isDataCached()) {
                return;
            }
            this.loading = true;
            try {
                const currentTab = this.currentTabConfig;
                if (!currentTab) return;
                const params = { ...this.queryParams };
                // 在售商品需要特殊处理统计数据和列表数据
                if (this.activeTab === 'zaishou') {
                    await this.loadZaishouData(params, skipStatistics);
                } else if (this.activeTab === 'fabu3') {
                    // 问题商品需要特殊处理统计数据和列表数据
                    await this.loadWentiData(params, skipStatistics);
                } else if (this.activeTab === 'fabu4') {
                    // 损耗商品需要特殊处理统计数据和列表数据
                    await this.loadSunhaoData(params, skipStatistics);
                } else {
                    await this.loadOtherTabData(currentTab.api, params);
                }

                // 更新缓存时间
                this.tabData[this.activeTab].lastUpdate = Date.now();
            } catch (error) {
                console.error('加载数据失败:', error);
                this.$message.error('数据加载失败');
            } finally {
                this.loading = false;
            }
        },

        // 检查数据是否已缓存
        isDataCached() {
            const currentData = this.tabData[this.activeTab];
            if (!currentData || !currentData.lastUpdate) return false;

            return (Date.now() - currentData.lastUpdate) < this.cacheTimeout;
        },

        // 加载在售商品数据
        async loadZaishouData(params, skipStatistics = false) {
            try {
                // 统计数据
                if (!skipStatistics) {
                    const statParams = { ...params, groupKey: '' };
                    const statRes = await zaishou(statParams);
                    if (statRes.data && statRes.data.length > 0) {
                        const totalData = statRes.data[0];
                        this.tabData.zaishou.statistics = [
                            { label: '商品数量', value: totalData.total_goods || 0, icon: this.statisticsIcons[0], url: '/tenantGoods/goodsManage?type=myAccount' },
                            { label: '销售总价', value: totalData.total_sales || 0, icon: this.statisticsIcons[1] },
                            { label: '回收成本', value: totalData.total_cost || 0, icon: this.statisticsIcons[2] },
                            { label: '预估利润', value: totalData.total_profit || 0, icon: this.statisticsIcons[3] },
                            { label: '平均利润', value: totalData.avg_profit || 0, icon: this.statisticsIcons[4] },
                            { label: '毛利率', value: `${totalData.mao}%`, icon: this.statisticsIcons[5] },
                        ];
                    } else {
                        // 没有数据时
                        this.tabData.zaishou.statistics = [
                            { label: '商品数量', value: 0, icon: this.statisticsIcons[0], url: '/tenantGoods/goodsManage?type=myAccount' },
                            { label: '销售总价', value: 0, icon: this.statisticsIcons[1] },
                            { label: '回收成本', value: 0, icon: this.statisticsIcons[2] },
                            { label: '预估利润', value: 0, icon: this.statisticsIcons[3] },
                            { label: '平均利润', value: 0, icon: this.statisticsIcons[4] },
                            { label: '毛利率', value: '0%', icon: this.statisticsIcons[5] },
                        ];
                    }
                }
      
                // 表格数据
                const listParams = { ...params, groupKey: params.groupKey };
                const listRes = await zaishou(listParams);

                this.tabData.zaishou.list = listRes.data || [];
            } catch (error) {
                console.error('加载在售商品数据失败:', error);
                throw error;
            }
        },

        // 加载其他tab数据
        async loadOtherTabData(api, params) {
            try {
                const res = await api(params);
                this.tabData[this.activeTab].list = res.data || [];
            } catch (error) {
                console.error(`加载${this.activeTab}数据失败:`, error);
                throw error;
            }
        },

        // 加载问题商品数据
        async loadWentiData(params, skipStatistics = false) {
            try {
                if (!skipStatistics) {
                    const statParams = { ...params, groupKey: '' };
                    const statRes = await wenti(statParams);
                    const totalData = statRes.data[0]
                    this.tabData.fabu3.totalCount = totalData.total_goods || 0;
                    this.tabData.fabu3.totalAmount = totalData.total_cost || 0;

                }
                // 处理列表数据
                const listParams = { ...params, groupKey: params.groupKey };
                const listRes = await wenti(listParams);
                this.tabData.fabu3.list = listRes.data || [];


            } catch (error) {
                console.error('加载问题商品数据失败:', error);
                throw error;
            }
        },

        // 加载损耗商品数据
        async loadSunhaoData(params, skipStatistics = false) {
            try {
                if (!skipStatistics) {
                    const statParams = { ...params, groupKey: '' };
                    const statRes = await sunhao(statParams);
                    const totalData = statRes.data[0]
                    this.tabData.fabu4.totalCount = totalData.total_goods || 0;
                    this.tabData.fabu4.totalAmount = totalData.total_cost || 0;

                }

                // 处理列表数据
                const listParams = { ...params, groupKey: params.groupKey };
                const listRes = await sunhao(listParams);
                this.tabData.fabu4.list = listRes.data || [];
            } catch (error) {
                console.error('加载损耗商品数据失败:', error);
                throw error;
            }
        },

        // 获取部门列表
        async getDeptList() {
            try {
                const { data } = await listDept();
                this.allDepts = data.filter(r => r.parentId != 100);
            } catch (error) {
                console.error('获取部门列表失败:', error);
                this.$message.warning('部门列表加载失败');
            }
        },

        // Tab切换处理
        handleTabChange(tab) {
            this.activeTab = tab.name;
            this.queryParams.groupKey = 'youxi'
            this.loadTabData(true);
        },

        // 分组切换处理
        handleGroupChange() {
            // 只请求表格数据，不请求统计数据

            let params = this.queryParams
            if (this.activeTab === 'zaishou') {
                this.loadZaishouData(params, true);
            } else if (this.activeTab === 'fabu3') {
                // 问题商品需要特殊处理统计数据和列表数据
                this.loadWentiData(params, true);
            } else if (this.activeTab === 'fabu4') {
                // 损耗商品需要特殊处理统计数据和列表数据
                this.loadSunhaoData(params, true);
            } else {
                this.loadOtherTabData(this.currentTabConfig.api, params);
            }
        },

        // 搜索处理
        search() {
            this.loadTabData(true); // 强制刷新，包含统计数据
            this.getStatus()
        },

        // 表格样式处理
        headerRowStyle(obj) {
            const columnIndex = obj.columnIndex;
            const styleMap = {
                0: 'custom-style0',
                1: 'custom-style1',
                2: 'custom-style2',
                3: 'custom-style3',
                4: 'custom-style4',
                5: 'custom-style5'
            };
            return styleMap[columnIndex] || '';
        },

        cellClassName({ columnIndex }) {
            const styleMap = {
                0: 'custom-style0',
                1: 'custom-style1',
                2: 'custom-style2',
                3: 'custom-style3',
                4: 'custom-style4',
                5: 'custom-style5'
            };
            return styleMap[columnIndex] || '';
        },

        // 格式化数字显示
        formatNumber(value) {
            if (value === null || value === undefined) return '0';
            return typeof value === 'number' ? value.toLocaleString() : value;
        },
        goUrl(item) {
            if (item.url) {
                this.$router.push(item.url);

            }
        },
         chongzhi() {
            this.queryParams.groupKey = 'youxi'
        this.$refs.queryForm.resetFields()
        this.getStatus(),
        this.loadTabData(true)
    },
    },
   
    created() {
        this.init();
    },

    // 组件销毁时清理
    beforeDestroy() {
        // 清理缓存数据
        this.tabData = {};
    },
}
</script>
<style scoped lang="scss">
.grid-content {
    padding: 10px;
    background: #fff;
    border-radius: 10px;

    .flex {
        align-items: center;
    }



    .shu-tip {
        font-size: 12px;
        color: #666;
        margin-left: 8px;
    }

    .shu-refresh {
        color: #FA6400;
        font-size: 12px;
        margin-left: 8px;

        .font14 {
            font-size: 12px;
            margin-right: 4px;
        }

        .el-icon-refresh-right {
            font-size: 15px;
            cursor: pointer;
        }
    }



    .customTab {
        margin-top: 14px;
        box-shadow: 0 0px 5px 0px rgba(0, 0, 0, .1);

        .tabs-box {
            width: 88%;
            margin: 30px auto;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .table_box {
            padding: 0 !important;
        }

        ::v-deep .el-tabs--border-card>.el-tabs__content {
            padding: 0 !important;
            overflow: visible !important;
        }

        .tabs-img {
            width: 48px;
            height: 48px;
            margin-right: 8px;

            img {
                width: 100%;
                height: 100%
            }
        }

        .tabs-text {
            color: #333;
            font-size: 15px;
            font-weight: 600;

            .tabs-num {
                margin-top: 4px;
                font-size: 22px;
            }
        }

        ::v-deep {
            .el-tabs--border-card {
                box-shadow: none;
                border: none;
            }

            .el-tabs__item {
                color: #666;
                font-weight: 500;
            }
        }

        ::v-deep .is-active {
            border-radius: 8px 8px 0px 0px;
            border: none;
        }
    }

    .app-container {
        border-radius: 0;
        min-height: auto;
        overflow: visible !important;
    }


    .lines {
        color: #f6f6f6;
        height: 8px;
    }
}

.tongji-box {
    background-color: #fff;
    margin-top: 8px;
    padding: 16px;
    border-radius: 10px;

    .shuju-img {
        width: 48px;
        height: 48px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .shuju-box {
        justify-content: center;

        .shuju-item {
            width: 290px;
            height: 102px;
            background: #FFFFFF;
            border-radius: 8px;
            align-items: center;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px;
            justify-content: center;
        }

        .shuju-item-2 {
            margin-left: 32px;
        }

        .shuju-txt {
            margin-left: 24px;
            font-size: 16px;
            color: #59AD00;
        }

        .shuju-txt-num {

            color: #FFAC00;
        }
    }
}

.echarts-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
    gap: 10px;
    margin-top: 30px;

    .echarts-item {
        border-radius: 10px;
        padding: 16px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px;
    }
}

.gard-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    grid-row-gap: 5px;
    margin: 16px 0;
    font-size: 16px;
    color: #6C5DD3;
    font-weight: 500;
}

video {
    margin-top: 8px;
    height: 150px;
    border-radius: 16px;
    width: 100%;
    object-fit: cover;
}

.video-title {
    margin-top: 6px;
}

.index-box {
   
    padding-bottom: 10px;
}

.radio-box {
    text-align: right;
    margin-bottom: 16px;
}

.fabu2 {
    margin-top: 16px;

    .radio-box {
        margin-bottom: 0;
    }


}

.fabu3 {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .radio-box {
        margin-bottom: 0;
    }

    .total-label {
        font-size: 15px !important;
    }

    .total-count,
    .total-amount {
        font-size: 22px !important;
    }
}

.total-info {
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;

    .total-label {
        color: #666;
        font-size: 14px;
    }

    .total-count {
        color: #409EFF;
        font-weight: 600;
        font-size: 16px;
    }

    .total-amount {
        color: #F56C6C;
        font-weight: 600;
        font-size: 16px;
    }
}

.statis-box {
    margin: 16px 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0px 5px 0px;
    padding: 16px 16px 4px;
    border-radius: 10px;
    background: #fff;
}

.statis-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .statis-item1 {
        background: linear-gradient(135deg,
                rgb(231, 246, 255) 0%,
                rgb(239, 250, 255) 100%);
    }

    .statis-item2 {
        background: linear-gradient(135deg,
                rgb(235, 241, 255) 0%,
                rgb(242, 246, 255) 100%);
    }

    .statis-item3 {
        background: linear-gradient(135deg,
                rgba(255, 239, 207, 0.2) 0%,
                rgba(242, 246, 255, 0.6) 100%);

    }

    .statis-item4 {
        background: linear-gradient(135deg,
                rgba(255, 221, 221, 0.2) 0%,
                rgba(255, 221, 221, 0.6) 100%);

    }

    .statis-item5 {
        background: linear-gradient(135deg,
                rgba(221, 255, 242, 0.2) 0%,
                rgba(221, 255, 242, 0.6) 100%);

    }

    .statis-item6 {
        background: linear-gradient(135deg,
                rgba(233, 233, 252, 0.2) 0%,
                rgba(233, 233, 252, 0.6) 100%);

    }

    .statis-item7 {
        background: linear-gradient(135deg,
                rgba(255, 233, 217, 0.2) 0%,
                rgba(255, 233, 217, 0.6) 100%);

    }

    .statis-item8 {
        background: linear-gradient(135deg,
                rgba(229, 255, 207, 0.2) 0%,
                rgba(229, 255, 207, 0.6) 100%);

    }

    .statis-item {
        margin-right: 12px;
        padding: 8px 16px;
        width: 180px;
        border-radius: 4px;
        margin-bottom: 12px;

        .label {
            font-size: 14px;
            color: #333;
        }

        .label-value {
            font-size: 14px;
            color: #999;
        }

        .num {
            font-size: 22px;
            color: #333;
            font-weight: 600;
            margin-top: 4px;
        }

        .last {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }

        .value {
            font-size: 14px;

            color: #333;

        }
    }
}

</style>
<style>

/* #FFEFCF
#FFDDDD
#DDFFF2
#E9E9FC
#FFE9D9
#E5FFCF */
/* .custom-style0 {
    background: #FFEFCF !important;
}

.custom-style1 {
    border-bottom: 1px solid #FFDDDD;

    background: #FFDDDD !important;
}

.custom-style2 {

    background: #DDFFF2 !important;
}

.custom-style3 {

    background: #E9E9FC !important;
}

.custom-style4 {

    background: #FFE9D9 !important;
}

.custom-style5 {
    background: #E5FFCF !important;
} */

.tips {
    color: #999;
    margin-left: 10px;
}

.fabu3-tips {
    margin-top: 16px;
}

.imgs {
    width: 48px;
    height: 48px;
    margin-right: 4px;
}

.img2 {
    margin-left: 8px;
}
</style>